﻿@model Logistics.Web.Models.Order.OrderLocationModel

@using Telerik.Web.Mvc
@using Telerik.Web.Mvc.UI
@using Nop.Core.Domain.Common

@using (Html.BeginForm("Location", "Order"))
{
    @Html.HiddenFor(model => model.Id)
    <div class="window-content">
        @Html.ValidationSummary(false)
        <div class="region-block">
            <div class="region-selection-block window-content space"><div class="col-ms-12 col-xs-12 col-sm-3 col-md-3 col-lg-3" style="padding-top:10px;">I am shipping within</div><div class="col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4">@Html.DropDownListFor(model => model.SelectedRegionId, Model.Regions)</div></div>
        </div>
        <div class="clear"></div>
        <div class="location-block" id="expressorder-location">
            <div class="location-block-wrapper">
                <div class="pickup-location-form col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">

                    <h2>Pickup Location</h2>

                    <div class="window-content">
                        <div class="signup-mandatory col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <input type="button" class="button-grey show-select-address-left" name="selectleftaddress" value="Previous Addresses" />
                            @Html.RequiredHint()<span>= Mandatory fields</span>
                        </div>
                        <div class="location-group my-location-company col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.LabelFor(model => model.UserAddress.Company)
                            @Html.EditorFor(model => model.UserAddress.Company)
                            @Html.ValidationMessageFor(model => model.UserAddress.Company)
                        </div>
                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.FirstName)
                                @Html.EditorFor(model => model.UserAddress.FirstName)
                                @Html.ValidationMessageFor(model => model.UserAddress.FirstName)
                            </div>

                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.LastName)
                                @Html.EditorFor(model => model.UserAddress.LastName)
                                @Html.ValidationMessageFor(model => model.UserAddress.LastName)
                            </div>
                        </div>

                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.LabelFor(model => model.UserAddress.Address2)
                            @Html.TextBoxFor(model => model.UserAddress.Address2, new { placeholder = T("Address.Fields.Address2.Placeholder").Text })
                            @Html.ValidationMessageFor(model => model.UserAddress.Address2)
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.Address1)
                            @Html.EditorFor(model => model.UserAddress.Address1)
                            @Html.ValidationMessageFor(model => model.UserAddress.Address1)
                        </div>

                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.City)
                                @Html.EditorFor(model => model.UserAddress.City)
                                @Html.ValidationMessageFor(model => model.UserAddress.City)
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.ZipPostalCode)
                                @Html.EditorFor(model => model.UserAddress.ZipPostalCode)
                                @Html.ValidationMessageFor(model => model.UserAddress.ZipPostalCode)
                            </div>
                        </div>
                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.StateProvinceId)
                                @Html.DropDownListFor(model => model.UserAddress.StateProvinceId, Model.AvailableUserAddrStateProvinces, new { style = "max-width:131px" })
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.LabelFor(model => model.UserAddress.CountryName)
                                <div class="location-display">
                                    @Html.DisplayFor(model => model.UserAddress.CountryName)
                                    @Html.HiddenFor(model => model.UserAddress.CountryId)
                                </div>
                            </div>
                        </div>
                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.UserAddress.CellPhoneNumber)
                                @Html.TextBoxFor(model => model.UserAddress.CellPhoneNumber, new { placeholder = T("Address.Fields.CellPhoneNumber.Placeholder").Text })
                                @Html.ValidationMessageFor(model => model.UserAddress.CellPhoneNumber)
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.LabelFor(model => model.UserAddress.PhoneNumber)
                                @Html.TextBoxFor(model => model.UserAddress.PhoneNumber, new { placeholder = T("Address.Fields.PhoneNumber.Placeholder").Text })
                                @Html.ValidationMessageFor(model => model.UserAddress.PhoneNumber)
                            </div>
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.LabelFor(model => model.UserAddress.Email)
                            @Html.EditorFor(model => model.UserAddress.Email)
                            @Html.HiddenFor(model => model.UserAddress.Email)
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="location-option-wrapper">
                                <table>
                                    <tbody>
                                        @if (Model.IsUserAddressTypeVerified)
                                        {
                                            <tr>
                                                <td class="label">
                                                    <label>This is a </label>
                                                    @Html.HiddenFor(model => model.UserAddress.Type)
                                                    @Html.HiddenFor(model => model.IsUserAddressTypeVerified)
                                                </td>
                                                <td><span class="lowercase">@Model.UserAddress.Type.Value</span> location</td>
                                            </tr>
                                        }
                                        else
                                        {
                                            <tr>
                                                <td class="label">
                                                    <label>@Html.RequiredHint() This is a </label>
                                                </td>
                                                <td>@Html.RadioButtonFor(model => model.UserAddress.Type, AddressType.Business)</td>
                                                <td>business location</td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td>@Html.RadioButtonFor(model => model.UserAddress.Type, AddressType.Residential)</td>
                                                <td>residential location</td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                                @Html.HiddenFor(model => model.UserAddress.IsTypeRequired)
                            </div>
                            @Html.ValidationMessageFor(model => model.UserAddress.Type)
                        </div>
                    </div>
                </div>
                <div class="delivery-location-form col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">

                    <h2>Delivery Location</h2>

                    <div class="window-content">
                        <div class="signup-mandatory col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <input type="button" class="button-grey show-select-address-right" name="selectrightaddress" value="Previous Addresses" />
                            @Html.RequiredHint()<span>= Mandatory fields</span>

                        </div>

                        <div class="location-group select-address-book-left">
                            <div class="window">
                                <div class="window-title grad-lightgrey grad">
                                    <div class="window-title-bar grad-titleshine grad">
                                        <h2>Previous Addresses</h2>
                                    </div>
                                </div>
                                <div class="window-content space">
                                    @(Html.Telerik().ComboBoxFor(x => x.SelectedUserAddressId)
                                    .BindTo(Model.Addresses)
                                    .Placeholder("Please select a previously entered address from the drop-down list...")
                                    .Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.Contains))
                                    .SelectedIndex(0)
                                    )
                                    <input type="button" value="Cancel" class="button-grey cancel-select-address-left" />
                                    <input type="submit" name="selectaddress" value="Select" class="button-red select-address-left" />
                                </div>
                            </div>
                        </div>
                        <div class="location-group select-address-book-right">
                            <div class="window">
                                <div class="window-title grad-lightgrey grad">
                                    <div class="window-title-bar grad-titleshine grad">
                                        <h2>Previous Addresses</h2>
                                    </div>
                                </div>
                                <div class="window-content space">
                                    @(Html.Telerik().ComboBoxFor(x => x.SelectedAddressId)
                                    .BindTo(Model.Addresses)
                                    .Placeholder("Please select a previously entered address from the drop-down list...")
                                    .Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.Contains))
                                    .SelectedIndex(0)
                                    )
                                    <input type="button" value="Cancel" class="button-grey cancel-select-address-right" />
                                    <input type="submit" name="selectaddress" value="Select" class="button-red select-address-right" />
                                </div>
                            </div>
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.LabelFor(model => model.Address.Company)
                            @Html.EditorFor(model => model.Address.Company)
                            @Html.ValidationMessageFor(model => model.Address.Company)
                        </div>
                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.Address.FirstName)
                                @Html.EditorFor(model => model.Address.FirstName)
                                @Html.ValidationMessageFor(model => model.Address.FirstName)
                            </div>

                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.Address.LastName)
                                @Html.EditorFor(model => model.Address.LastName)
                                @Html.ValidationMessageFor(model => model.Address.LastName)
                            </div>
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.LabelFor(model => model.Address.Address2)
                            @Html.TextBoxFor(model => model.Address.Address2, new { placeholder = T("Address.Fields.Address2.Placeholder").Text })
                            @Html.ValidationMessageFor(model => model.Address.Address2)
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.RequiredHint() @Html.LabelFor(model => model.Address.Address1)
                            @Html.EditorFor(model => model.Address.Address1)
                            @Html.ValidationMessageFor(model => model.Address.Address1)
                        </div>

                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.Address.City)
                                @Html.EditorFor(model => model.Address.City)
                                @Html.ValidationMessageFor(model => model.Address.City)
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.Address.ZipPostalCode)
                                @Html.EditorFor(model => model.Address.ZipPostalCode)
                                @Html.ValidationMessageFor(model => model.Address.ZipPostalCode)
                            </div>
                        </div>
                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.Address.StateProvinceId)
                                @Html.DropDownListFor(model => model.Address.StateProvinceId, Model.AvailableAddressStateProvinces, new { style = "max-width:131px" })
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.LabelFor(model => model.Address.CountryName)
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.CountryName)
                                    @Html.HiddenFor(model => model.Address.CountryId)
                                </div>
                            </div>
                        </div>
                        <div class="location-group">
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.RequiredHint() @Html.LabelFor(model => model.Address.CellPhoneNumber)
                                @Html.TextBoxFor(model => model.Address.CellPhoneNumber, new { placeholder = T("Address.Fields.CellPhoneNumber.Placeholder").Text })
                                @Html.ValidationMessageFor(model => model.Address.CellPhoneNumber)
                            </div>
                            <div class="col-ms-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                @Html.LabelFor(model => model.Address.PhoneNumber)
                                @Html.TextBoxFor(model => model.Address.PhoneNumber, new { placeholder = T("Address.Fields.PhoneNumber.Placeholder").Text })
                                @Html.ValidationMessageFor(model => model.Address.PhoneNumber)
                            </div>
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            @Html.LabelFor(model => model.Address.Email, "Email (delivery confirmation)")
                            @Html.EditorFor(model => model.Address.Email)
                            @Html.ValidationMessageFor(model => model.Address.Email)
                        </div>
                        <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="location-option-wrapper">
                                <table>
                                    <tbody>
                                        @if (Model.IsAddressTypeVerified)
                                        {
                                            <tr>
                                                <td class="label">
                                                    <label>This is a </label>
                                                    @Html.HiddenFor(model => model.Address.Type)
                                                    @Html.HiddenFor(model => model.IsAddressTypeVerified)
                                                </td>
                                                <td><span class="lowercase">@Model.Address.Type.Value</span> location</td>
                                            </tr>
                                        }
                                        else
                                        {
                                            <tr>
                                                <td class="label">
                                                    <label>@Html.RequiredHint() This is a </label>
                                                </td>
                                                <td>@Html.RadioButtonFor(model => model.Address.Type, AddressType.Business, new { id = "delivery-address-type-business" })</td>
                                                <td>business location</td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td>@Html.RadioButtonFor(model => model.Address.Type, AddressType.Residential, new { id = "delivery-address-type-residential" })</td>
                                                <td>residential location</td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                                @Html.HiddenFor(model => model.Address.IsTypeRequired)
                            </div>
                            @Html.ValidationMessageFor(model => model.Address.Type)
                        </div>
                    </div>
                </div>
                <div class="content-clear"></div>
                <div class="location-group col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="address-residential-note col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <p>Note: An additional fee of $2 per package will apply if the delivery location is a residential location. A residential location is defined as a location that is a home, including a business operating out of a home.</p>
                        <p>For any package that is delivered to a residential location with "No Signature Required" selected, the $2 fee will be waived; however, SpotsHUB EXPRESS will only make one delivery attempt. Any package that is not picked up by the receiver within 7 days from the final delivery attempt will be returned to the sender.</p>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="location-hr"></div>
                <div class="window-content space location-pickupcheck">
                    @Html.CheckBoxFor(model => model.IsUserAddressPickup)
                    @Html.LabelFor(model => model.IsUserAddressPickup)
                </div>

                <div class="window-content location-pickupdetail">
                    <div class="location-instruction col-ms-6 col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div class="location-comments location-group">
                            <div>
                                <strong>You may enter special shipping instruction(s) regarding this order:</strong>
                            </div>
                            <div class=" package-comment">
                                <div class="package-line package-comment-input">
                                    @Html.EditorFor(model => model.AdditionalInstruction)
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="location-signature col-ms-6 col-xs-6 col-sm-6 col-md-6 col-lg-6" id="signature-section">
                        <div class="">
                            <label><strong>@Html.RequiredHint() Receiver signature required?</strong></label>
                            <div class="location-radio">
                                <table style="margin-bottom:10px;">
                                    <tbody>
                                        <tr>
                                            <td>@Html.RadioButtonFor(model => model.NoSignature, true)</td>
                                            <td>No, leave at front door </td>
                                        </tr>
                                        <tr><td></td><td>(one delivery attempt only)</td></tr>
                                        <tr>
                                            <td>@Html.RadioButtonFor(model => model.NoSignature, false)</td>
                                            <td>Yes</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <span>Any package with "No Signature Required" selected will not qualify for the free insurance coverage.</span>
                            </div>
                        </div>
                        @Html.ValidationMessageFor(model => model.NoSignature)
                    </div>

                </div>
                <div class="location-option-wrapper location-packagecount">
                    <div class="location-group location-text col-ms-6 col-xs-6 col-sm-3 col-md-3 col-lg-3">
                        <label><strong>@Html.RequiredHint() Number of packages:</strong></label>
                        @Html.TextBoxFor(model => model.PackageNumber)
                    </div>
                </div>
                <div class="content-clear"></div>
                <div class="location-hr"></div>

                @{
                    bool hasPickupTime = false;
                    for (int i = 0; i < Model.AvaliablePickupTimeWindows.Count; i++)
                    {
                        for (int j = 0; j < Model.AvaliablePickupDates.Count; j++)
                        {
                            if (Model.AvaliablePickupDateTimeWindows[j, i] != null && Model.AvaliablePickupDateTimeWindows[j, i].Selected)
                            {
                                hasPickupTime = true;
                                <input type="hidden" name="PickupDate" id="PickupDate" value="@Model.AvaliablePickupDateTimeWindows[j, i].PickupDate">
                                <input type="hidden" name="PickupTimeWindowId" id="PickupTimeWindowId" value="@Model.AvaliablePickupDateTimeWindows[j, i].PickupTimeWindow">
                            }
                        }
                    }
                }

                <div class="location-date-picking window-content space">
                    <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <strong>Preferred pickup time:</strong>
                        <div class="location-radio">
                            <table>
                                <tr>
                                    <td>
                                        <input type="radio" name="haspickdate" class="pickdate" value="default" @if (!hasPickupTime) { <text> checked</text> } />
                                    </td>
                                    <td>Package is ready for pickup.</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="radio" name="haspickdate" class="pickdate" value="pick" @if (hasPickupTime) { <text> checked</text> } />
                                    </td>
                                    <td>Schedule a pickup date and time: <span class="picked-time"></span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="pickup-calendar-wrapper">
                            <table class="pickup-calendar">
                                <thead>
                                    <tr>
                                        <th></th>
                                        @foreach (var d in Model.AvaliablePickupDates)
                                    {
                                            <th class="date">@d</th>
                                    }
                                    </tr>
                                </thead>
                                <tbody>
                                    @for (int i = 0; i < Model.AvaliablePickupTimeWindows.Count; i++)
                                {
                                        <tr>
                                            <td>@Model.AvaliablePickupTimeWindows[i]</td>
                                            @for (int j = 0; j < Model.AvaliablePickupDates.Count; j++)
                                        {
                                                <td>
                                                    @if (Model.AvaliablePickupDateTimeWindows[j, i].CanSelect)
                                                {
                                                        <div class="available @if (Model.AvaliablePickupDateTimeWindows[j, i].Selected)
                                                                          { <text>selected</text> }" data-date="@Model.AvaliablePickupDateTimeWindows[j, i].PickupDate" data-time="@Model.AvaliablePickupDateTimeWindows[j, i].PickupTimeWindow">
                                                        </div>
                                                }
                                                else
                                                {
                                                        <div class="unavailable @Model.AvaliablePickupDateTimeWindows[j, i].PickupTimeWindow"></div>
                                                }
                                                </td>
                                        }
                                        </tr>
                                }

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="location-hr"></div>
                <div class="location-fee-agreement window-content space">
                    <div class="col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <input type="checkbox" id="location-fee-agreement" /> <span class="required">*</span><span>I hereby agree that SpotsHUB reserves the right to apply any additional charge(s) resulting from my own errors (e.g., misreported number of packages, misreported package size or weight, change of address etc.) to my credit card on file or the credit card that I have used to place the order with.</span>
                    </div>
                </div>
                @*Html.ValidationSummary(false)*@
                <div class="shippinginfo-link col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <input type="submit" name="continue" value="@T("Logistics.Common.Continue").Text" class="button-red" @if (Model.HasInsuranceOnPackages) { <text> id="check-nosignature" </text>        } />
                    <input type="button" class="cancel-location-refresh button-grey" value="@T("Logistics.Common.Cancel").Text" onclick="location.reload(true)" />
                </div>
                <div class="content-clear"></div>
            </div>
        </div>
    </div>
}

@if (Model.ResetPickupTime)
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('.ajax-loading-wrapper').hide();
            $('.ajax-loading-box').addClass("label-notification");
            $('.ajax-loading-box .title').html('<h2><span class="red">Spots</span>HUB</h2>');
            $('.ajax-loading-box .content').html('<h3><span class="red">IMPORTANT</span></h3><p class="center">Please re-select a preferred pickup time.</p><div class="ajax-notification-buttons one"><a class="ajax-notification-continue button-red">Okay</a></div>');
            $('#ajax-notification, .ajax-loading-box').fadeIn();
            $('.ajax-notification-continue').click(function () {
                $('.ajax-loading-box, #ajax-notification').fadeOut();
            });
        });
    </script>
}

<script type="text/javascript">
    var regionStateProvinceMap = @Html.Raw(
        Json.Encode(
            Model.RegionStateProvinceMap.Select(x => new
            {
                regionId = x.RegionId,
                provinceId = x.StateProvinceId,
                provinceName = x.StateProvinceName
            })
        )
    )

    $("#delivery-address-type-residential").click(function () {
        displaySignatureSection(true);
    });

    $("#delivery-address-type-business").click(function () {
        displaySignatureSection(false);
    });
    
    $("#location-fee-agreement").change(function () {
        checkFeeAgreement();
    });

    function displaySignatureSection(show) {
        if (show) {
            $("#signature-section").show();
        } else {
            $("#signature-section").hide();
        }
    }

    function checkFeeAgreement() {
        if ($("#location-fee-agreement").is(":checked")) {
            $(".shippinginfo-link .button-red").show();
        } else {
            $(".shippinginfo-link .button-red").hide();
        }
    }

    $(document).ready(function () {
        if ($('input.pickdate:checked').val() != "default") {
            $('.pickup-calendar-wrapper').css({ "height": $('.pickup-calendar').outerHeight() });
        }


        checkFeeAgreement();

        if ($(".validation-summary-errors").length) {
            $("html, body").stop().animate({ "scrollTop": $(".validation-summary-errors").offset().top - 140 });
        }

        var showSignatureSection = false;
        @if (Model.Address.Type == AddressType.Residential)
        {
            <text>showSignatureSection = true;</text>
        }
        displaySignatureSection(showSignatureSection);
    });

    $('.location-group .icon-info').mouseenter(function () {
        var infobox = $(this).parent().find('.location-option-info');
        infobox.css({ "left": $(this).offset().left + 25, "top": $(this).offset().top, "opacity": 0 });
        infobox.stop().show().animate({ "opacity": 1 });
    }).mouseleave(function () {
        var infobox = $(this).parent().find('.location-option-info');
        infobox.css({ "opacity": 1 });
        infobox.stop().animate({ "opacity": 0 }, function () {
            $(this).hide();
        });
    });

    var formchanged = false;
    var selectedregion = $("#@Html.FieldIdFor(model => model.SelectedRegionId)").val();

    $(".pickup-location-form input[type=text], .delivery-location-form input[type=text]").change(function () {
        formchanged = true;
    });

    $("#@Html.FieldIdFor(model => model.SelectedRegionId)").change(function () {
        $(".pickup-location-form input[type=text], .delivery-location-form input[type=text]").each(function () {
            if ($(this).val() != "") {
                formchanged = true;
            }
        });
        if (formchanged) {
            $('.ajax-loading-wrapper').fadeOut(function () {
                $('.ajax-loading-box .title').html('<h2><span class="red">Spots</span>HUB</h2>');
                $('.ajax-loading-box .content').html('<p>Changing the shipping region will clear the address information for this package. Would you like to continue?</p><div class="region-buttons"><input type="button" class="button-grey change-region-proceed" value="Yes"><input type="button" class="button-grey change-region-cancel" value="No"></div>');
                $('#ajax-notification, .ajax-loading-box').fadeIn();
            });
            $(".change-region-proceed").unbind("click").click(function () {
                $(".pickup-location-form input[type=text], .delivery-location-form input[type=text]").not(".t-input").val("");
                $("#@Html.FieldIdFor(model => model.Address.StateProvinceId), #@Html.FieldIdFor(model => model.UserAddress.StateProvinceId)").val(0).trigger("change");
                $('#ajax-notification, .ajax-loading-wrapper').fadeOut();
                selectedregion = $("#@Html.FieldIdFor(model => model.SelectedRegionId)").val();
                checkregionselected();
            });
            $(".change-region-cancel").unbind("click").click(function () {
                $('#ajax-notification, .ajax-loading-wrapper').fadeOut();
                $("#@Html.FieldIdFor(model => model.SelectedRegionId)").val(selectedregion);
                $(".region-selection-block .beautify-select-text").text($("#@Html.FieldIdFor(model => model.SelectedRegionId) option:selected").text());
                $(".region-selection-block .beautify-select-option").removeClass("selected");
                $(".region-selection-block .beautify-select-option[data-val=" + $("#@Html.FieldIdFor(model => model.SelectedRegionId) option:selected").val() + "]").addClass("selected");
                $(".region-selected-region").text($("#@Html.FieldIdFor(model => model.SelectedRegionId) option:selected").text());
            });
        } else {
            selectedregion = $("#@Html.FieldIdFor(model => model.SelectedRegionId)").val();
            checkregionselected();
        }

    });

    function checkregionselected() {
        formchanged = false;
        if ($("#@Html.FieldIdFor(model => model.SelectedRegionId)").val() == 0) {
            $(".region-unselected-text").show();
            $(".location-block").animate({ "height": 0 });
        } else {
            $(".region-unselected-text").hide();
            for (var key in regionStateProvinceMap) {
                if ($("#@Html.FieldIdFor(model => model.SelectedRegionId) option:selected").val() == regionStateProvinceMap[key].regionId) {
                    $(".region-selected-region").text($("#@Html.FieldIdFor(model => model.SelectedRegionId) option:selected").text());
                    $(".location-group .location-province").text(regionStateProvinceMap[key].provinceName);
                    $("input#Address_StateProvinceId, input#UserAddress_StateProvinceId").remove();
                    $("#@Html.FieldIdFor(model => model.SelectedRegionId)").append('<input data-val="true" data-val-number="The field Province must be a number." id="Address_StateProvinceId" name="Address.StateProvinceId" type="hidden" value="' + regionStateProvinceMap[key].provinceId + '">')
                    .append('<input data-val="true" data-val-number="The field Province must be a number." id="UserAddress_StateProvinceId" name="UserAddress.StateProvinceId" type="hidden" value="' + regionStateProvinceMap[key].provinceId + '">');
                }
            }
            $(".location-block").animate({ "height": $(".location-block-wrapper").outerHeight() }, function () {
                $(".location-block").css("height", "auto");
            });
        }
    }

    $('input.pickdate').change(function () {
        if ($('input.pickdate:checked').val() == "default") {
            $('.pickup-calendar-wrapper').stop().animate({ "height": 0 });
            $('.pickup-calendar td div').removeClass("selected");
            $('input#PickupDate').remove();
            $('input#PickupTimeWindowId').remove();
        } else {
            $('.pickup-calendar-wrapper').stop().animate({ "height": $('.pickup-calendar').outerHeight() });
        }
    });
    $('.pickup-calendar td div').click(function () {
        $('.picked-time').empty();
        $('input#PickupDate').remove();
        $('input#PickupTimeWindowId').remove();
        if ($(this).hasClass("available") && !$(this).hasClass("selected")) {
            $('.pickup-calendar td div').removeClass("selected");
            $(this).addClass("selected");
            var parent = $(this).parent();
            var parentindex = parent.parent().children().index(parent);
            var date = $('.pickup-calendar th').eq(parentindex).text();
            var time = $(this).parent().parent().children().eq(0).text();
            $(this).closest('form').append('<input type="hidden" name="PickupDate" id="PickupDate" value="' + $(this).attr('data-date') + '" />');
            $(this).closest('form').append('<input type="hidden" name="PickupTimeWindowId" id="PickupTimeWindowId" value="' + $(this).attr('data-time') + '" />');
            $('.picked-time').text(date + ' ' + time);
        } else {
            $('.pickup-calendar td div').removeClass("selected");
        }
    });

    $('.location-pickupcheck').hide();
    $('.select-mylocation').change(function () {
        if ($(this).val() == "pickup") {
            $('.select-orderlocation').val("delivery");
            $('#IsUserAddressPickup').attr('checked', true);
        } else {
            $('.select-orderlocation').val("pickup");
            $('#IsUserAddressPickup').attr('checked', false);
        }
        var val = $('option:selected', this).text();
        $(this).next().text(val);
        val = $('.select-orderlocation option:selected').text();
        $('.select-orderlocation').next().text(val);
    });
    $('.select-orderlocation').change(function () {
        if ($(this).val() == "pickup") {
            $('.select-mylocation').val("delivery");
            $('#IsUserAddressPickup').attr('checked', false);
        } else {
            $('.select-mylocation').val("pickup");
            $('#IsUserAddressPickup').attr('checked', true);
        }
        var val = $('option:selected', this).text();
        $(this).next().text(val);
        val = $('.select-mylocation option:selected').text();
        $('.select-mylocation').next().text(val);
    });

    $('.location-packageinput #PackageNumber').keyup(function () {
        $('.location-line.error').empty();
        var value = $('.location-packageinput #PackageNumber').val();
        if (value == '') {
            $(this).css("border-color", "#ccc");
        } else {
            value = Math.ceil(value);
            value = parseInt(value);
            if (!isNumber(value)) {
                $(this).css("border-color", "red");
                $('.location-line.error').append('<div><span>Number of packages is invalid.</span></div>');
            } else if (value > '@Model.MaxPackageNumber') {
                $(this).css("border-color", "red");
                $('.location-line.error').append('<div><span>Number of packages exceeds maximum allowed number of @Model.MaxPackageNumber).</span></div>');
            } else {
                $(this).css("border-color", "#ccc");
            }
        }
    });

    $('.show-select-address-left').click(function () {
        $('.ajax-loading-box').hide();
        $('body').css("overflow", "hidden");
        $('.select-address-book-left, #ajax-notification').fadeIn();
    });

    $('.show-select-address-right').click(function () {
        $('.ajax-loading-box').hide();
        $('body').css("overflow", "hidden");
        $('.select-address-book-right, #ajax-notification').fadeIn();
    });

    $('.cancel-select-address-left').click(function () {
        $('body').css("overflow", "auto");
        $('#SelectedUserAddressId-input').val("Please select a previously entered address from the drop-down list...");
        $('#SelectedUserAddressId').val("");
        $('.select-address-book-left, #ajax-notification').fadeOut();
    });

    $('.cancel-select-address-right').click(function () {
        $('body').css("overflow", "auto");
        $('#SelectedAddressId-input').val("Please select a previously entered address from the drop-down list...");
        $('#SelectedAddressId').val("");
        $('.select-address-book-right, #ajax-notification').fadeOut();
    });

    validationInputStyling();
    function validationInputStyling() {
        $('.field-validation-error').each(function () {
            $(this).prev('input, div').css({ "border": "1px solid #fc566a" });
        });
    }
    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    // Package count switch control
    checkPackageCount();
    $('input[name="IsExpress"]').change(function () {
        checkPackageCount();
    });
    function checkPackageCount() {
        if ($('input[name="IsExpress"]:checked').val() == "True") {
            $('.location-packageinput, .location-normalcheckout').hide();
            $('.location-expresscheckout').show();
        } else {
            $('.location-packageinput, .location-normalcheckout').show();
            $('.location-expresscheckout').hide();
        }
    }

</script>
